<template>
  <div>
    <a-input-search
      placeholder="选择API"
      style="width: 100%"
      v-model="sourceName"
      @search="openform"
    />
    <selectApilist
      ref="selectApilistcontrol"
      :methodType="methodType"
      :sourceApiId="sourceApiId"
      :controlInfo.sync="controlInfo"
      :controlId="controlId"
      :controlType="controlType"
      :apicode="sourceApi"
      @select="confirmSelect"
      :isparamset="false"
    ></selectApilist>
  </div>
</template>
<script>
import selectApilist from '@/components/formdesign/selectApilist.vue'
export default {
  props: [
    'apicode',
    'methodType',
    'sourceApiId',
    'controlInfo',
    'controlId',
    'controlType',
    'apiName'
  ],
  data() {
    return {
      sourceApi: '',
      sourceName: '',
      sourcetype: '',
      sourcefromid: ''
    }
  },
  components: { selectApilist },
  methods: {
    openform() {
      this.$refs.selectApilistcontrol.openform()
    },
    confirmSelect(source) {
      this.sourceApi = source.sourceApi
      this.sourceName = source.sourceName
      this.sourcetype = source.type
      this.sourcefromid = source.fromid
      this.controlInfo.options.sourceApi = source.sourceApi
      this.controlInfo.options.sourceName = source.sourceName
      this.controlInfo.options.sourcetype = source.type
      this.controlInfo.options.fromid = source.fromid
    }
  },
  created() {
    this.sourceApi = this.controlInfo.options.sourceApi
    this.sourceName = this.controlInfo.options.sourceName
    this.sourcetype = this.controlInfo.options.sourcetype
    this.sourcefromid = this.controlInfo.options.fromid
  },
  watch: {
    controlInfo(val) {
      this.sourceApi = val.options.sourceApi
      this.sourceName = val.options.sourceName
      this.sourcetype = val.options.sourcetype
      this.sourcefromid = val.options.fromid
    }
  }
}
</script>
<style scoped>
.inputform div:first-child {
  width: 80px;
  display: inline-block;
  height: 40px;
  margin-top: 10px;
  margin-left: 10px;
}
.inputform .el-input {
  width: calc(100% - 100px);
  float: right;
}
.inputform .el-select {
  width: calc(100% - 100px);
  float: right;
}
.inputform button {
  margin-left: 5px;
  margin-right: 5x;
}
.filterbottom {
  margin-top: 8px;
  margin-left: 15px;
  margin-right: 10px;
}
.filterbottom button {
  float: right;
  margin-right: 10px;
  margin-bottom: 20px;
}
.operation {
  width: 200px;
  float: right;
}
</style>
